<template>
  <div class="app-container">
    <el-tabs
      v-model="editableTabsValue"
      type="card"
      editable
      @tab-click="getRule"
      @tab-add="addModule"
      @tab-remove="removeModule"
    >
      <el-tab-pane
        :key="item.name"
        v-for="item in editableTabs"
        :label="item.title"
        :name="item.name"
      >
        <el-row>
            <el-col>
                
            </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="提示"
      :visible.sync="deleteDialogVisible"
      width="30%"
    >
      <span>请确认操作!</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteDialogVisible = false"
          >编辑</el-button
        >
        <el-button type="danger" @click="deleteDialogVisible = false"
          >删除</el-button
        >
        <el-button @click="deleteDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getModuleListApi } from "@/api/system/system";

export default {
  data() {
    return {
      deleteDialogVisible: false,
      editableTabsValue: "2",
      editableTabs: [],
      tabIndex: 1,
    };
  },
  created() {
    this.getModule();
  },
  methods: {
    getModule() {
      getModuleListApi().then((res) => {
        if (res.code == 200) {
          this.editableTabs = res.data.list;
        }
      });
    },
    getRule(e) {
      this.$message.success("测试成功");
    },
    addModule() {
      this.$message.success("添加模块");
    },
    removeModule(e) {
      this.deleteDialogVisible = true;
    },
  },
};
</script>